<template>
  <div class="box">
    <h3>儿子小明: 有存款: {{ money }}</h3>
    <button @click="giveMoney($parent)">给BABA钱: 50</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const money = ref(20000)

const giveMoney = (parent: any) => {
  // 父亲的钱增多
  console.log(parent)
  console.log(parent.money)
  parent.money += 50
  // 自己的钱减少
  money.value -= 50
}

// 组件的数据不能随便被其他组件拿到,只有在当前组件允许的情况下可以被其他组件获取到
// defineExpose 就是在告诉外部,这个数据是可以被外部获取的
defineExpose({
  money
})
</script>
